<template>
  <view class="oto-tab-scroll-box">
    <scroll-view
      class="oto-tab-scroll"
      :scroll-y="scrollY"
      @scroll="scroll"
      scroll-left="0"
      scroll-with-animation
      :style="[customStyle]"
      @scrolltoupper="scrolltoupper"
      @scrolltolower="scrolltolower"
      :scroll-top="scrollTop"
      :enable-back-to-top="true"
      :refresher-enabled="refresherEnabled"
      :refresher-threshold="refresherThreshold"
      :refresher-triggered="triggered"
      @refresherrefresh="refreshing"
      :scroll-anchoring="scrollAnchoring"
      :lower-threshold="lowerThreshold"
    >
      <slot></slot>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {
      customStyle: {
        type: Object,
        default() {
          return {
            height: '100%'
          };
        }
      },
      scrollY: {
        type: Boolean,
        default: true
      },
      refresherThreshold: {
        // 就是下拉多少才会触发下拉刷新的值，单位为px，详细是触发下拉更新的临界值，向下拉，松手又回去了，列表没有更新，这是没有达到refresher-threshold的值；达到这个值后，松手是「更新中」的提示。
        type: Number,
        default: 45
      },
      lowerThreshold: {
        type: Number, // 距底部/右边多远时（单位px），触发 scrolltolower 事件
        default: 80
      },
      refresherEnabled: {
        type: Boolean, // 是否开启刷新
        default: false
      },
      scrollAnchoring: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        triggered: false
      };
    },
    methods: {
      scroll(e) {
        this.old.scrollTop = e.detail.scrollTop;
        this.$emit('update:scrollTop', e.detail.scrollTop);
        this.$emit('scroll', e);
      },
      scrolltoupper(e) {
        this.$emit('scrolltoupper', e);
      },
      scrolltolower(e) {
        this.$emit('scrolltolower', e);
      },
      toTop() {
        this.scrollTop = this.old.scrollTop;
        this.$nextTick(() => {
          this.scrollTop = 0;
        });
      },
      refreshing(e) {
        if (!this.triggered) {
          this.triggered = true;
        }
        setTimeout(() => {
          this.triggered = false;
        }, 200);

        this.$emit('onRefresh', e);
      }
    }
  };
</script>

<style>
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    display: none;
  }
</style>

<style lang="scss" scoped>
  .oto-tab-scroll-box {
    min-width: 100%;
    height: 100%;
    .scroll-to-top {
      position: fixed;
      right: 32rpx;
      bottom: 200rpx;
      z-index: 600;
    }
    .oto-tab-scroll {
      min-width: 100%;
      height: 100%;
      //   position: relative;

      .scroll-item {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
